<template>
  <div class="shop-score">
    <div :style="statStyle">stats</div>
    <div>{{ rating }}</div>
    <div>月售{{ recent_order_num }}单</div>
  </div>
</template>

<script>
export default {
  name: "ShopScore",
  props: {
    rating: {
      type: Number,
      default: 0
    },
    recent_order_num: {
      type: Number,
      default: 0
    }
  },
  computed: {
    statStyle() { // 根据不同的评分来获取相应的背景地址。
      let bgp = ''
      if(this.rating === 5) bgp = '-82px';
      else if(this.rating >= 4)  bgp = '-62px';
      else if(this.rating >= 3)  bgp = '-42px';
      else if(this.rating >= 2)  bgp = '-22px';
      else bgp = '-2px';
      return 'background-position: 0 ' + bgp + ';'
    }
  }
};
</script>

<style lang="less" scoped>
.shop-score {
  & div:first-child {
    width: 100px; // 背景相隔20px
    text-indent: -999px;
    vertical-align: middle;
    background: url("assets/images/stats.webp") no-repeat 0 -61px;
    background-size: 100px auto;
  }
  & div:nth-child(2) {
    margin: 0 4px;
    color: #f9ec28;
    font-size: 17px;
    font-weight: 700;
  }
  & div:last-child {
    font-size: 12px;
    line-height: 20px;
    color: rgba(100, 100, 100, 0.4);
  }
}
</style>